<template>
  <div class="cicle10" @mouseenter="show" @mouseleave="hide">
    <span>{{ title }}</span>
    <p class="p1">{{ score }}</p>
    <p class="p2">{{ level }}</p>
<!--    <pi v-show="visible">-->
<!--      {{ description }}-->
<!--    </pi>-->
<!--    <tree class="tree" id="tree10" v-show="visible">-->
<!--    <li><span class="caret">与用户有过协作的用户数量</span>-->
<!--      <ul class="nested">-->
<!--        <li>总分</li>-->
<!--        <li>100</li>-->
<!--      </ul>-->
<!--    </li>-->
<!--    <li><span class="caret">用户与协作者之间的紧密程度</span>-->
<!--      <ul class="nested">-->
<!--        <li>总分</li>-->
<!--        <li>90</li>-->
<!--      </ul>-->
<!--    </li>-->
<!--  </tree>-->

  </div>
</template>

<script setup>
import { ref,toRefs,defineProps } from "vue";
// 使用props接收父组件传递的数据
const props = defineProps({
  title: String, // 圆形组件的标题
  score: Number, // 圆形组件的总分
  level: String, // 圆形组件的等级
  description: String, // 圆形组件的描述
});

// 解构props对象
const {title, score, level, description } = toRefs(props);

    const visible = ref(false); // 定义一个响应式变量，控制弹出框和文本框的显示
    const show = () => {
      visible.value = true; // 鼠标移入时，设置为true
    };
    const hide = () => {
      visible.value = false; // 鼠标移出时，设置为false
    };

</script>

<style lang="less">
.cicle10{
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  top: 70%;
  left: 50%;
  z-index: 100;
  margin-left: -1.5rem;
  border-radius: 50%;
  transition: transform 0.5s;
  background     : url("~@/images/circle2.png") no-repeat;
  background-size: 100%;
  animation      : rotate7 50s linear infinite;
  color:#0ac1c7;
  span {
    position: relative;
    /* 设置元素相对于其正常位置的偏移量 */
    top: 0px; /* 向下偏移 10 像素 */
    left: 0px; /* 向右偏移 20 像素 */
    font-family: 'LCdd';
    display: block;
    margin-left: 25%;
    font-size: 0.3rem;
    margin-top: 20%;
  }
  .p1 {
    position: relative;
    top: -10px; /* 向下偏移 10 像素 */
    left: 0px; /* 向右偏移 20 像素 */
    text-align: center;
    font-size: 1rem;
    font-family: 'LCdd';
    color: #f39c12;
  }
  .p2{
    position: relative;
    top: -20px; /* 向下偏移 10 像素 */
    left: 0px; /* 向右偏移 20 像素 */
    text-align: center;
    font-size: 0.5rem;
    font-family: 华文中宋;
    color: #93c6de;
  }
  ul
  {
    li{
      float: left;
      color: #ec1717;
      font-size: 0.2rem;
      margin-left: 5%;
      span{
        float: left;
        color: #fff;
        font-size: 0.3rem;
        margin-left: 5%;
      }
    }
  }
  & :hover{
    //transform: scale(1.2);
  }

}

// 旋转动画7
@keyframes rotate7 {
  0% {
    transform: matrix3d(0.85822, 0, 0, 0, 0, 0.85822, 0, 0, 0, 0, 1, 0, -267.87097, -12.53332, 0, 1);
    z-index  : 99.87467;
  }

  1% {
    transform: matrix3d(0.83754, 0, 0, 0, 0, 0.83754, 0, 0, 0, 0, 1, 0, -265.21756, -18.73813, 0, 1);
    z-index  : 99.81262;
  }

  2% {
    transform: matrix3d(0.8171, 0, 0, 0, 0, 0.8171, 0, 0, 0, 0, 1, 0, -261.51745, -24.86899, 0, 1);
    z-index  : 99.75131;
  }

  3% {
    transform: matrix3d(0.79699, 0, 0, 0, 0, 0.79699, 0, 0, 0, 0, 1, 0, -256.78526, -30.9017, 0, 1);
    z-index  : 99.69098;
  }

  4% {
    transform: matrix3d(0.77729, 0, 0, 0, 0, 0.77729, 0, 0, 0, 0, 1, 0, -251.03965, -36.81246, 0, 1);
    z-index  : 99.63188;
  }

  5% {
    transform: matrix3d(0.75807, 0, 0, 0, 0, 0.75807, 0, 0, 0, 0, 1, 0, -244.3033, -42.57793, 0, 1);
    z-index  : 99.57422;
  }

  6% {
    transform: matrix3d(0.73942, 0, 0, 0, 0, 0.73942, 0, 0, 0, 0, 1, 0, -236.6028, -48.17537, 0, 1);
    z-index  : 99.51825;
  }

  7% {
    transform: matrix3d(0.72139, 0, 0, 0, 0, 0.72139, 0, 0, 0, 0, 1, 0, -227.96854, -53.58268, 0, 1);
    z-index  : 99.46417;
  }

  8% {
    transform: matrix3d(0.70407, 0, 0, 0, 0, 0.70407, 0, 0, 0, 0, 1, 0, -218.43459, -58.77853, 0, 1);
    z-index  : 99.41221;
  }

  9% {
    transform: matrix3d(0.68753, 0, 0, 0, 0, 0.68753, 0, 0, 0, 0, 1, 0, -208.03857, -63.7424, 0, 1);
    z-index  : 99.36258;
  }

  10% {
    transform: matrix3d(0.67182, 0, 0, 0, 0, 0.67182, 0, 0, 0, 0, 1, 0, -196.82153, -68.45471, 0, 1);
    z-index  : 99.31545;
  }

  11% {
    transform: matrix3d(0.65701, 0, 0, 0, 0, 0.65701, 0, 0, 0, 0, 1, 0, -184.82772, -72.89686, 0, 1);
    z-index  : 99.27103;
  }

  12% {
    transform: matrix3d(0.64316, 0, 0, 0, 0, 0.64316, 0, 0, 0, 0, 1, 0, -172.10447, -77.05132, 0, 1);
    z-index  : 99.22949;
  }

  13% {
    transform: matrix3d(0.63033, 0, 0, 0, 0, 0.63033, 0, 0, 0, 0, 1, 0, -158.70201, -80.9017, 0, 1);
    z-index  : 99.19098;
  }

  14% {
    transform: matrix3d(0.61856, 0, 0, 0, 0, 0.61856, 0, 0, 0, 0, 1, 0, -144.67323, -84.43279, 0, 1);
    z-index  : 99.15567;
  }

  15% {
    transform: matrix3d(0.6079, 0, 0, 0, 0, 0.6079, 0, 0, 0, 0, 1, 0, -130.07348, -87.63067, 0, 1);
    z-index  : 99.12369;
  }

  16% {
    transform: matrix3d(0.59839, 0, 0, 0, 0, 0.59839, 0, 0, 0, 0, 1, 0, -114.96039, -90.4827, 0, 1);
    z-index  : 99.09517;
  }

  17% {
    transform: matrix3d(0.59007, 0, 0, 0, 0, 0.59007, 0, 0, 0, 0, 1, 0, -99.39361, -92.97765, 0, 1);
    z-index  : 99.07022;
  }

  18% {
    transform: matrix3d(0.58298, 0, 0, 0, 0, 0.58298, 0, 0, 0, 0, 1, 0, -83.43456, -95.10565, 0, 1);
    z-index  : 99.04894;
  }

  19% {
    transform: matrix3d(0.57714, 0, 0, 0, 0, 0.57714, 0, 0, 0, 0, 1, 0, -67.14622, -96.85831, 0, 1);
    z-index  : 99.03142;
  }

  20% {
    transform: matrix3d(0.57257, 0, 0, 0, 0, 0.57257, 0, 0, 0, 0, 1, 0, -50.59289, -98.22872, 0, 1);
    z-index  : 99.01771;
  }

  21% {
    transform: matrix3d(0.5693, 0, 0, 0, 0, 0.5693, 0, 0, 0, 0, 1, 0, -33.83989, -99.21146, 0, 1);
    z-index  : 99.00789;
  }

  22% {
    transform: matrix3d(0.56732, 0, 0, 0, 0, 0.56732, 0, 0, 0, 0, 1, 0, -16.95333, -99.80266, 0, 1);
    z-index  : 99.00197;
  }

  23% {
    transform: matrix3d(0.56667, 0, 0, 0, 0, 0.56667, 0, 0, 0, 0, 1, 0, 0.00015, -99.99999, 0, 1);
    z-index  : 99;
  }

  24% {
    transform: matrix3d(0.56732, 0, 0, 0, 0, 0.56732, 0, 0, 0, 0, 1, 0, 16.95364, -99.80266, 0, 1);
    z-index  : 99.00197;
  }

  25% {
    transform: matrix3d(0.5693, 0, 0, 0, 0, 0.5693, 0, 0, 0, 0, 1, 0, 33.84024, -99.21145, 0, 1);
    z-index  : 99.00789;
  }

  26% {
    transform: matrix3d(0.57257, 0, 0, 0, 0, 0.57257, 0, 0, 0, 0, 1, 0, 50.59331, -98.2287, 0, 1);
    z-index  : 99.01771;
  }

  27% {
    transform: matrix3d(0.57714, 0, 0, 0, 0, 0.57714, 0, 0, 0, 0, 1, 0, 67.14674, -96.85828, 0, 1);
    z-index  : 99.03142;
  }

  28% {
    transform: matrix3d(0.58298, 0, 0, 0, 0, 0.58298, 0, 0, 0, 0, 1, 0, 83.4352, -95.1056, 0, 1);
    z-index  : 99.04894;
  }

  29% {
    transform: matrix3d(0.59007, 0, 0, 0, 0, 0.59007, 0, 0, 0, 0, 1, 0, 99.39444, -92.97758, 0, 1);
    z-index  : 99.07022;
  }

  30% {
    transform: matrix3d(0.59839, 0, 0, 0, 0, 0.59839, 0, 0, 0, 0, 1, 0, 114.96147, -90.48262, 0, 1);
    z-index  : 99.09517;
  }

  31% {
    transform: matrix3d(0.6079, 0, 0, 0, 0, 0.6079, 0, 0, 0, 0, 1, 0, 130.07487, -87.63055, 0, 1);
    z-index  : 99.12369;
  }

  32% {
    transform: matrix3d(0.61856, 0, 0, 0, 0, 0.61856, 0, 0, 0, 0, 1, 0, 144.67503, -84.43264, 0, 1);
    z-index  : 99.15567;
  }

  33% {
    transform: matrix3d(0.63033, 0, 0, 0, 0, 0.63033, 0, 0, 0, 0, 1, 0, 158.70434, -80.9015, 0, 1);
    z-index  : 99.19099;
  }

  34% {
    transform: matrix3d(0.64316, 0, 0, 0, 0, 0.64316, 0, 0, 0, 0, 1, 0, 172.10748, -77.05106, 0, 1);
    z-index  : 99.22949;
  }

  35% {
    transform: matrix3d(0.65701, 0, 0, 0, 0, 0.65701, 0, 0, 0, 0, 1, 0, 184.83158, -72.89652, 0, 1);
    z-index  : 99.27103;
  }

  36% {
    transform: matrix3d(0.67182, 0, 0, 0, 0, 0.67182, 0, 0, 0, 0, 1, 0, 196.82649, -68.45427, 0, 1);
    z-index  : 99.31546;
  }

  37% {
    transform: matrix3d(0.68753, 0, 0, 0, 0, 0.68753, 0, 0, 0, 0, 1, 0, 208.04493, -63.74182, 0, 1);
    z-index  : 99.36258;
  }

  38% {
    transform: matrix3d(0.70407, 0, 0, 0, 0, 0.70407, 0, 0, 0, 0, 1, 0, 218.4427, -58.77778, 0, 1);
    z-index  : 99.41222;
  }

  39% {
    transform: matrix3d(0.72139, 0, 0, 0, 0, 0.72139, 0, 0, 0, 0, 1, 0, 227.97887, -53.58172, 0, 1);
    z-index  : 99.46418;
  }

  40% {
    transform: matrix3d(0.73942, 0, 0, 0, 0, 0.73942, 0, 0, 0, 0, 1, 0, 236.61593, -48.17414, 0, 1);
    z-index  : 99.51826;
  }

  41% {
    transform: matrix3d(0.75808, 0, 0, 0, 0, 0.75808, 0, 0, 0, 0, 1, 0, 244.31993, -42.57636, 0, 1);
    z-index  : 99.57424;
  }

  42% {
    transform: matrix3d(0.7773, 0, 0, 0, 0, 0.7773, 0, 0, 0, 0, 1, 0, 251.06067, -36.81045, 0, 1);
    z-index  : 99.6319;
  }

  43% {
    transform: matrix3d(0.797, 0, 0, 0, 0, 0.797, 0, 0, 0, 0, 1, 0, 256.81175, -30.89914, 0, 1);
    z-index  : 99.69101;
  }

  44% {
    transform: matrix3d(0.81711, 0, 0, 0, 0, 0.81711, 0, 0, 0, 0, 1, 0, 261.55076, -24.86574, 0, 1);
    z-index  : 99.75134;
  }

  45% {
    transform: matrix3d(0.83755, 0, 0, 0, 0, 0.83755, 0, 0, 0, 0, 1, 0, 265.25934, -18.73401, 0, 1);
    z-index  : 99.81266;
  }

  46% {
    transform: matrix3d(0.85824, 0, 0, 0, 0, 0.85824, 0, 0, 0, 0, 1, 0, 267.92326, -12.52811, 0, 1);
    z-index  : 99.87472;
  }

  47% {
    transform: matrix3d(0.87909, 0, 0, 0, 0, 0.87909, 0, 0, 0, 0, 1, 0, 269.5325, -6.27248, 0, 1);
    z-index  : 99.93728;
  }

  48% {
    transform: matrix3d(0.90003, 0, 0, 0, 0, 0.90003, 0, 0, 0, 0, 1, 0, 270.08133, 0.00827, 0, 1);
    z-index  : 100.00008;
  }

  49% {
    transform: matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, 270, 0, 0, 1);
    z-index  : 100;
  }

  50% {
    transform: matrix3d(0.92093, 0, 0, 0, 0, 0.92093, 0, 0, 0, 0, 1, 0, 269.46722, 6.27905, 0, 1);
    z-index  : 100.06279;
  }

  51% {
    transform: matrix3d(0.94178, 0, 0, 0, 0, 0.94178, 0, 0, 0, 0, 1, 0, 267.87097, 12.53332, 0, 1);
    z-index  : 100.12533;
  }

  52% {
    transform: matrix3d(0.96246, 0, 0, 0, 0, 0.96246, 0, 0, 0, 0, 1, 0, 265.21756, 18.73813, 0, 1);
    z-index  : 100.18738;
  }

  53% {
    transform: matrix3d(0.9829, 0, 0, 0, 0, 0.9829, 0, 0, 0, 0, 1, 0, 261.51745, 24.86899, 0, 1);
    z-index  : 100.24869;
  }

  54% {
    transform: matrix3d(1.00301, 0, 0, 0, 0, 1.00301, 0, 0, 0, 0, 1, 0, 256.78526, 30.9017, 0, 1);
    z-index  : 100.30902;
  }

  55% {
    transform: matrix3d(1.02271, 0, 0, 0, 0, 1.02271, 0, 0, 0, 0, 1, 0, 251.03965, 36.81246, 0, 1);
    z-index  : 100.36812;
  }

  56% {
    transform: matrix3d(1.04193, 0, 0, 0, 0, 1.04193, 0, 0, 0, 0, 1, 0, 244.3033, 42.57793, 0, 1);
    z-index  : 100.42578;
  }

  57% {
    transform: matrix3d(1.06058, 0, 0, 0, 0, 1.06058, 0, 0, 0, 0, 1, 0, 236.6028, 48.17537, 0, 1);
    z-index  : 100.48175;
  }

  58% {
    transform: matrix3d(1.07861, 0, 0, 0, 0, 1.07861, 0, 0, 0, 0, 1, 0, 227.96854, 53.58268, 0, 1);
    z-index  : 100.53583;
  }

  59% {
    transform: matrix3d(1.09593, 0, 0, 0, 0, 1.09593, 0, 0, 0, 0, 1, 0, 218.43459, 58.77853, 0, 1);
    z-index  : 100.58779;
  }

  60% {
    transform: matrix3d(1.11247, 0, 0, 0, 0, 1.11247, 0, 0, 0, 0, 1, 0, 208.03858, 63.7424, 0, 1);
    z-index  : 100.63742;
  }

  61% {
    transform: matrix3d(1.12818, 0, 0, 0, 0, 1.12818, 0, 0, 0, 0, 1, 0, 196.82153, 68.45471, 0, 1);
    z-index  : 100.68455;
  }

  62% {
    transform: matrix3d(1.14299, 0, 0, 0, 0, 1.14299, 0, 0, 0, 0, 1, 0, 184.82772, 72.89686, 0, 1);
    z-index  : 100.72897;
  }

  63% {
    transform: matrix3d(1.15684, 0, 0, 0, 0, 1.15684, 0, 0, 0, 0, 1, 0, 172.10448, 77.05132, 0, 1);
    z-index  : 100.77051;
  }

  64% {
    transform: matrix3d(1.16967, 0, 0, 0, 0, 1.16967, 0, 0, 0, 0, 1, 0, 158.70202, 80.9017, 0, 1);
    z-index  : 100.80902;
  }

  65% {
    transform: matrix3d(1.18144, 0, 0, 0, 0, 1.18144, 0, 0, 0, 0, 1, 0, 144.67323, 84.43279, 0, 1);
    z-index  : 100.84433;
  }

  66% {
    transform: matrix3d(1.1921, 0, 0, 0, 0, 1.1921, 0, 0, 0, 0, 1, 0, 130.07349, 87.63067, 0, 1);
    z-index  : 100.87631;
  }

  67% {
    transform: matrix3d(1.20161, 0, 0, 0, 0, 1.20161, 0, 0, 0, 0, 1, 0, 114.96041, 90.48271, 0, 1);
    z-index  : 100.90483;
  }

  68% {
    transform: matrix3d(1.20993, 0, 0, 0, 0, 1.20993, 0, 0, 0, 0, 1, 0, 99.39363, 92.97765, 0, 1);
    z-index  : 100.92978;
  }

  69% {
    transform: matrix3d(1.21702, 0, 0, 0, 0, 1.21702, 0, 0, 0, 0, 1, 0, 83.43459, 95.10565, 0, 1);
    z-index  : 100.95106;
  }

  70% {
    transform: matrix3d(1.22286, 0, 0, 0, 0, 1.22286, 0, 0, 0, 0, 1, 0, 67.14627, 96.85832, 0, 1);
    z-index  : 100.96858;
  }

  71% {
    transform: matrix3d(1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, 50.59295, 98.22873, 0, 1);
    z-index  : 100.98229;
  }

  72% {
    transform: matrix3d(1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, 33.83997, 99.21147, 0, 1);
    z-index  : 100.99211;
  }

  73% {
    transform: matrix3d(1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, 16.95344, 99.80267, 0, 1);
    z-index  : 100.99803;
  }

  74% {
    transform: matrix3d(1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, 0, 100, 0, 1);
    z-index  : 101;
  }
  75% {
    transform: matrix3d(1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, -16.95344, 99.80267, 0, 1);
    z-index  : 100.99803;
  }

  76% {
    transform: matrix3d(1.2307, 0, 0, 0, 0, 1.2307, 0, 0, 0, 0, 1, 0, -33.83997, 99.21147, 0, 1);
    z-index  : 100.99211;
  }

  77% {
    transform: matrix3d(1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, -50.59295, 98.22873, 0, 1);
    z-index  : 100.98229;
  }

  78% {
    transform: matrix3d(1.22286, 0, 0, 0, 0, 1.22286, 0, 0, 0, 0, 1, 0, -67.14627, 96.85832, 0, 1);
    z-index  : 100.96858;
  }

  79% {
    transform: matrix3d(1.21702, 0, 0, 0, 0, 1.21702, 0, 0, 0, 0, 1, 0, -83.43459, 95.10565, 0, 1);
    z-index  : 100.95106;
  }

  80% {
    transform: matrix3d(1.20993, 0, 0, 0, 0, 1.20993, 0, 0, 0, 0, 1, 0, -99.39363, 92.97765, 0, 1);
    z-index  : 100.92978;
  }

  81% {
    transform: matrix3d(1.20161, 0, 0, 0, 0, 1.20161, 0, 0, 0, 0, 1, 0, -114.96041, 90.48271, 0, 1);
    z-index  : 100.90483;
  }

  82% {
    transform: matrix3d(1.1921, 0, 0, 0, 0, 1.1921, 0, 0, 0, 0, 1, 0, -130.07349, 87.63067, 0, 1);
    z-index  : 100.87631;
  }

  83% {
    transform: matrix3d(1.18144, 0, 0, 0, 0, 1.18144, 0, 0, 0, 0, 1, 0, -144.67323, 84.43279, 0, 1);
    z-index  : 100.84433;
  }

  84% {
    transform: matrix3d(1.16967, 0, 0, 0, 0, 1.16967, 0, 0, 0, 0, 1, 0, -158.70202, 80.9017, 0, 1);
    z-index  : 100.80902;
  }

  85% {
    transform: matrix3d(1.15684, 0, 0, 0, 0, 1.15684, 0, 0, 0, 0, 1, 0, -172.10448, 77.05132, 0, 1);
    z-index  : 100.77051;
  }

  86% {
    transform: matrix3d(1.14299, 0, 0, 0, 0, 1.14299, 0, 0, 0, 0, 1, 0, -184.82772, 72.89686, 0, 1);
    z-index  : 100.72897;
  }

  87% {
    transform: matrix3d(1.12818, 0, 0, 0, 0, 1.12818, 0, 0, 0, 0, 1, 0, -196.82153, 68.45471, 0, 1);
    z-index  : 100.68455;
  }

  88% {
    transform: matrix3d(1.11247, 0, 0, 0, 0, 1.11247, 0, 0, 0, 0, 1, 0, -208.03858, 63.7424, 0, 1);
    z-index  : 100.63742;
  }

  89% {
    transform: matrix3d(1.09593, 0, 0, 0, 0, 1.09593, 0, 0, 0, 0, 1, 0, -218.43459, 58.77853, 0, 1);
    z-index  : 100.58779;
  }

  90% {
    transform: matrix3d(1.07861, 0, 0, 0, 0, 1.07861, 0, 0, 0, 0, 1, 0, -227.96854, 53.58268, 0, 1);
    z-index  : 100.53583;
  }

  91% {
    transform: matrix3d(1.06058, 0, 0, 0, 0, 1.06058, 0, 0, 0, 0, 1, 0, -236.6028, 48.17537, 0, 1);
    z-index  : 100.48175;
  }

  92% {
    transform: matrix3d(1.04193, 0, 0, 0, 0, 1.04193, 0, 0, 0, 0, 1, 0, -244.3033, 42.57793, 0, 1);
    z-index  : 100.42578;
  }

  93% {
    transform: matrix3d(1.02271, 0, 0, 0, 0, 1.02271, 0, 0, 0, 0, 1, 0, -251.03965, 36.81246, 0, 1);
    z-index  : 100.36812;
  }

  94% {
    transform: matrix3d(1.00301, 0, 0, 0, 0, 1.00301, 0, 0, 0, 0, 1, 0, -256.78526, 30.9017, 0, 1);
    z-index  : 100.30902;
  }

  95% {
    transform: matrix3d(0.9829, 0, 0, 0, 0, 0.9829, 0, 0, 0, 0, 1, 0, -261.51745, 24.86899, 0, 1);
    z-index  : 100.24869;
  }

  96% {
    transform: matrix3d(0.96246, 0, 0, 0, 0, 0.96246, 0, 0, 0, 0, 1, 0, -265.21756, 18.73813, 0, 1);
    z-index  : 100.18738;
  }

  97% {
    transform: matrix3d(0.94178, 0, 0, 0, 0, 0.94178, 0, 0, 0, 0, 1, 0, -267.87097, 12.53332, 0, 1);
    z-index  : 100.12533;
  }

  98% {
    transform: matrix3d(0.92093, 0, 0, 0, 0, 0.92093, 0, 0, 0, 0, 1, 0, -269.46722, 6.27905, 0, 1);
    z-index  : 100.06279;
  }

  99% {
    transform: matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, -270, 0, 0, 1);
    z-index  : 100;
  }

  100% {
    transform: matrix3d(0.87907, 0, 0, 0, 0, 0.87907, 0, 0, 0, 0, 1, 0, -269.46722, -6.27905, 0, 1);
    z-index  : 99.93721;
  }

}
/* 你的样式代码 */
</style>
